<template>
  <div class="fd-col-demo">
    <h1>【aty-col】 component demo</h1>
    <p>【aty-col】 本质</p>

    <h2>span演示</h2>
    <p>栅格的占位格数，可选值为1~24的整数</p>
    <div class="aty-clearfix" v-for="(item,index) in dataList">
      <aty-col :span="index+1">span-<span v-text="index+1"></span></aty-col>
    </div>

    <h2>push演示</h2>
    <p>栅格向右移动格数</p>
    <div class="aty-clearfix" v-for="(item,index) in dataList">
      <aty-col span="1" :push="index+1">push-<span v-text="index+1"></span></aty-col>
    </div>

    <h2>pull演示</h2>
    <p>栅格向左移动格数</p>
    <div class="aty-clearfix" v-for="(item,index) in dataList">
      <aty-col span="1" offset="24" :pull="index+1">pull-<span v-text="index+1"></span></aty-col>
    </div>

    <h2>offset演示</h2>
    <p>栅格左侧的间隔格数，间隔内不可以有栅格</p>
    <div class="aty-clearfix" v-for="(item,index) in dataList">
      <aty-col span="1" :offset="index+1">offset-<span v-text="index+1"></span></aty-col>
    </div>

    <h2>大小展示</h2>
    <p>响应式栅格，可为栅格数或一个包含其他属性的对象</p>
    <div class="aty-clearfix">
      <aty-col :span="5">默认span-</aty-col>
      <aty-col :span="2" :xs="5">xs-</aty-col>
      <aty-col :sm="5">sm-</aty-col>
      <aty-col :md="5">md-</aty-col>
      <aty-col :lg="5">lg-</aty-col>
      <aty-col :xs="{span:2,push:2}">xs-</aty-col>
    </div>
  </div>
</template>

<script>
//  import { Alert, Icon } from 'Artery';
export default {
  data: function () {
    return {
      dataList: new Array(24)
    }
  }
}
</script>
<style  lang="less" type="text/less" scoped >
    .fd-col-demo {
        .aty-col {
            height: 30px;
            border: 1px solid #d7dde4;
        }
    }
</style>
